<template>
  <el-input
    v-model="inputValue"
    :placeholder="`请输入${field.displayName}`"
    :disabled="disabled"
    @input="handleInput"
  ></el-input>
</template>

<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
  field: {
    type: Object,
    required: true
  },
  value: {
    type: String,
    default: ''
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['input'])

const inputValue = ref(props.value)

// 监听值变化
watch(() => props.value, (newVal) => {
  inputValue.value = newVal
})

// 处理输入
const handleInput = (val) => {
  emit('input', val)
}
</script>
